<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:t="http://myfaces.apache.org/tomahawk">

<ui:composition template="/template.xhtml">
	<ui:define name="head">
		<link href="#{facesContext.externalContext.requestContextPath}/css/rf/panel.css" rel="stylesheet" type="text/css" />
		
		<h:outputStylesheet>
			.valuesTableHeader {
				vertical-align: bottom;
				text-align: left;
			}
		</h:outputStylesheet>
	</ui:define>

	<ui:define name="content">
		<h:form>
			<h:panelGrid columns="3">
				<h:outputText value="Identifier" />
				<h:outputText value="Display Name" />
				<h:outputText value="Type" />
				<h:inputText value="#{customFieldsAction.targetEntity.fieldKey}" />
				<h:inputText value="#{customFieldsAction.targetEntity.displayName}" />
				<h:selectOneMenu converter="customFieldTypeConverter" style="width: 100%;"
					value="#{customFieldsAction.targetEntity.fieldType}">
					<f:selectItems value="#{customFieldsAction.customFieldTypesAsSelectItems}" />
					<f:ajax event="change" execute="@this" render="customFieldValueProviderPanel" />
				</h:selectOneMenu>
			</h:panelGrid>
			<h:panelGroup>
				<h:selectBooleanCheckbox value="#{customFieldsAction.targetEntity.required}" />
				<h:outputText value="Required" />
			</h:panelGroup>
			<rich:panel header="Custom Field Description" style="margin-top: 10px;" 
				rendered="#{not empty customFieldsAction.targetEntity.description or not customFieldsAction.readonly}">
				<rich:editor id="fieldDescriptionEditor" style="width: 100%; margin-bottom: 1em;"
					rendered="#{not customFieldsAction.readonly}" toolbar="basic"
					value="#{customFieldsAction.targetEntity.description}">
				</rich:editor>
						
				<h:outputText style="width: 100%" escape="false" value="#{customFieldsAction.targetEntity.description}" 
					rendered="#{not empty customFieldsAction.targetEntity.description}"/>
			</rich:panel>
			<h:panelGroup id="customFieldValueProviderPanel">
				<rich:panel header="Custom Field Value Provider" style="margin-top: 20px;" 
					rendered="#{customFieldsAction.requiresDataProvider()}">
					<h:panelGrid columns="3">
						<h:outputText value="Type" />
						<h:outputText value="Identifier" />
						<h:outputText value="Display Name" />

						<h:selectOneMenu style="width: 100%;" value="#{customFieldsAction.valueProviderModel.valueProviderType}"
							converter="customFieldValueProviderTypeConverter">
							<f:selectItems value="#{customFieldsAction.customFieldValueProviderTypesAsSelectItems}" />
							<f:ajax event="change" execute="customFieldValueProviderPanel" render="customFieldValueProviderPanel" />
						</h:selectOneMenu>
						<h:inputText value="#{customFieldsAction.valueProviderModel.identifier}" />
						<h:inputText value="#{customFieldsAction.valueProviderModel.displayName}" />
					</h:panelGrid>

					<a4j:region id="staticListData" rendered="#{customFieldsAction.valueProviderModel.staticListDataProvider}">
						<rich:panel header="Static List Data Provider" style="margin-top: 10px;">
							<h:dataTable id="listTable" value="#{customFieldsAction.valueProviderModel.staticList}" 
								var="listValue" headerClass="valuesTableHeader">
								<h:column>
									<f:facet name="header">
										<h:inputText value="#{customFieldsAction.valueProviderModel.staticListValue}" />
									</f:facet>
									<h:outputText value="#{listValue}" />
								</h:column>
								<h:column>
									<f:facet name="header">
										<a4j:commandButton action="#{customFieldsAction.valueProviderModel.actionAddToStaticList()}" 
											execute="listTable" render="listTable" value="Add New Value" />
									</f:facet>
								</h:column>
							</h:dataTable>
						</rich:panel>
					</a4j:region>
					<a4j:region id="wsData" rendered="#{customFieldsAction.valueProviderModel.WSDataProvider}">
						<rich:panel header="Web Service Data Provider">
							<h:panelGrid columns="2">
								<h:outputText value="WSDL Location" />
								<h:inputText value="#{customFieldsAction.valueProviderModel.wsdlLocation}" />
								
								<h:outputText value="Operation" />
								<h:inputText value="#{customFieldsAction.valueProviderModel.operation}" />
								
								<a4j:commandButton action="#{customFieldsAction.actionTestWsDataProvider()}" />
							</h:panelGrid>
						</rich:panel>
					</a4j:region>
					<a4j:region id="clData" rendered="#{customFieldsAction.valueProviderModel.codelistDataProvider}">
						<rich:panel header="Codelist Data Provider">
							<h:panelGrid columns="2">
								<h:outputText value="Codelist Code" />
								<h:inputText value="#{customFieldsAction.valueProviderModel.codelistCode}" />
							</h:panelGrid>
						</rich:panel>
					</a4j:region>
						
					<rich:panel header="Custom Field Value Provider Description" style="margin-top: 10px;" 
						rendered="#{not customFieldsAction.readonly or not empty customFieldsAction.valueProviderModel.description}">
						<rich:editor id="providerDescriptionEditor" style="width: 100%; margin-bottom: 1em;"
							rendered="#{not customFieldsAction.readonly}" toolbar="basic"
							value="#{customFieldsAction.valueProviderModel.description}">
						</rich:editor>
						
						<h:outputText style="width: 100%" escape="false" value="#{customFieldsAction.valueProviderModel.description}" 
							rendered="#{not empty customFieldsAction.valueProviderModel.description and customFieldsAction.readonly}"/>
					</rich:panel>
				</rich:panel>
			</h:panelGroup>
			<div style="min-height: 30px;">
				<h:outputText value="&nbsp;" escape="false" />
			</div>
			<h:panelGroup id="actionsDiv" styleClass="#{customFieldsAction.fixedActionDiv ? 'actionsDivFixed' : 'actionsDiv'}">
				<div style="float: left;">
					<h:commandButton rendered="#{not customFieldsAction.readonly}" action="#{customFieldsAction.actionSave()}" value="Save" />
					<h:commandButton rendered="#{customFieldsAction.readonly}" action="#{customFieldsAction.actionEdit()}" value="Edit" />
					<h:commandButton rendered="#{not customFieldsAction.readonly}" immediate="true" action="#{customFieldsAction.actionCancelEdit()}"
						value="Cancel" />
				</div>
				<div style="float: right;">
					<h:outputLabel styleClass="commonLabel" value="Fix'd-in-Place" for="fixActionDiv" />
					<h:selectBooleanCheckbox id="fixActionDiv" value="#{customFieldsAction.fixedActionDiv}">
						<a4j:ajax immediate="true" render="actionsDiv" />
					</h:selectBooleanCheckbox>
				</div>
				<div style="clear: both;" />
			</h:panelGroup>
		</h:form>
	</ui:define>
</ui:composition>
</html>
